<template>
    <div style="height: 600px;">
        <Timeline ref="timeline" :items="items" :groups="groups" :options="options">
        </Timeline>
    </div>
</template>
   
<script>
import { Timeline } from 'vue2vis'

export default {
    components: { Timeline },
    data() {
        return {
            groups: [
                {
                    id: 1,
                    content: 'P20231010-00011',
                },
                {
                    id: 2,
                    content: 'P20231010-00012',
                },
                {
                    id: 3,
                    content: 'P20231010-00013',
                },
                {
                    id: 4,
                    content: 'P20231010-00014',
                },
                {
                    id: 5,
                    content: 'P20231010-00015',
                },
                {
                    id: 6,
                    content: 'P20231010-00016',
                },
                {
                    id: 7,
                    content: 'P20231010-00017',
                },
                {
                    id: 8,
                    content: 'P20231010-00018',
                },
                {
                    id: 9,
                    content: 'P20231010-00019',
                }
            ],
            items: [
                {
                    id: 2,
                    group: 1,
                    content: '50/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style: "color: white; background-color: green;",
                },
                {
                    id: 3,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style: "color: white; background-color: blue;",
                },
                {
                    id: 1,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style: "color: white; background-color: blue;",
                },
                {
                    id: 4,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 6,
                    group: 1,
                    content: '0/100',
                    start: '2014-04-19 08:00',
                    end: '2014-04-19 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 22,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    style: "color: white; background-color: red;",
                },
                {
                    id: 23,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 21,
                    group: 2,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 32,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 33,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 31,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 34,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 35,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 36,
                    group: 3,
                    content: '0/100',
                    start: '2014-04-19 08:00',
                    end: '2014-04-19 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 432,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 433,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 431,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 434,
                    group: 4,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5432,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5433,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5431,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5434,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 5435,
                    group: 5,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 65432,
                    group: 6,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 65433,
                    group: 6,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 65431,
                    group: 6,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 65434,
                    group: 6,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 65435,
                    group: 6,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 765432,
                    group: 7,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 765433,
                    group: 7,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 765431,
                    group: 7,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 765434,
                    group: 7,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 765435,
                    group: 7,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 8765432,
                    group: 8,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 8765433,
                    group: 8,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 8765431,
                    group: 8,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 8765434,
                    group: 8,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 8765435,
                    group: 8,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 98765432,
                    group: 9,
                    content: '0/100',
                    start: '2014-04-14 08:00',
                    end: '2014-04-14 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 98765433,
                    group: 9,
                    content: '0/100',
                    start: '2014-04-15 08:00',
                    end: '2014-04-15 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 98765431,
                    group: 9,
                    content: '0/100',
                    start: '2014-04-16 08:00',
                    end: '2014-04-16 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 98765434,
                    group: 9,
                    content: '0/100',
                    start: '2014-04-17 08:00',
                    end: '2014-04-17 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
                {
                    id: 98765435,
                    group: 9,
                    content: '0/100',
                    start: '2014-04-18 08:00',
                    end: '2014-04-18 20:00',
                    title: '工作中心：车加工中心<br>工序：车加工<br>物料：花键轴<br>计划数量：100<br>右键更多操作',
                    align: 'right',
                    className: 'red',
                },
            ],
            options: {
                editable: {
                    updateTime: true,
                },
            },
        }
    },
    methods: {
        doubleClick: () => {
        }
    },
    mounted: function () {

    }
}
</script>

<style lang="less" scoped>
.blue {
    color: white;
    background-color: blue;
}

.green {
    color: white;
    background-color: green;
}

.red {
    color: white;
    background-color: red;
}

.yellow {
    color: black;
    background-color: yellow;
}
</style>